/**
 * 记录页面是浪费和充值记录共用的
 * 通过url是否带cost参数来区分 
 * url带cost参数，表示要显示充值记录
 * 否则，表示要显示消费记录
 */
import '../css/common.css'
import '../css/wallet_log.less'
import qs from './common/qs' // 引入qs功能
// import moment from 'moment' // 引入格式做日期模块
import {dateFtt} from './common/utils' // 引入格式做日期方法
import {getRecord} from './common/api' // 引入获取账户记录接口
import {isLogined} from '../common/loginValidate/loginValidate' // 导入登录验证模块

isLogined(loginedOperation) // 验证是否已经登录，传入已登录要执行的操作

// 页面所有的操作都应该在已经登录后才会执行
function loginedOperation () {

  // 显示记录DOM
  const log = document.getElementById('log')
  // body元素DOM,用于控制显示状态
  const body = document.body
  // 控制滚动条离底部多少像素开始加载
  const loadDistance = 100
  // 每页加载条数
  const pageSize = 20
  // 保存当前所在页数
  let pageIndex = 1
  // 保存是否还有下一页
  let haveNextPage = true
  // 用于保存节点，减小重排成本  
  let  fragment
  // 保存url参数
  let query = qs.urlParse()

  /**
 * 创建DOM元素
 * @param {*} tagName String 标签名称 默认li
 * @param {*} opts Object 配置 {text：内容,attr：属性对象}
 * return element // 创建的元素
 */
  function createElement(tagName = 'li' , opts = {attr:{}}){
    let element = document.createElement(tagName)
    opts.text && (element.innerText = opts.text)
    for(let prop in opts.attr){
      element.setAttribute(prop,opts.attr[prop])
    } 
    return element
  }
  /**
 * 创建li标签
 * @param {*} list Array li标签数据 
 * return lis 
 */
  function getLis(list){
    // 保存创建的所有的li标签
    let lis = []
    // 保存创建的li
    let liElement
    // 保存创建的div
    let div
    // 保存支付方式文字
    let paySite
    // 保存消费log文本
    let logText
    // 遍历传入的数据，创建多个li标签
    for(let li of list){
      // 创建li标签
      liElement = createElement() 
      // 添加p标签
      if(!query.cost){ // 查看充值记录
        logText = '账户充值'
      } else {// 查看消费记录
        // 根据返回的type确定消费log文本
        switch (li.type) {
        case 1:
          logText='保养'
          break
        case 2:
          logText='维修'
          break
        case 3:
          logText='洗车'
          break
        case 4:
          logText='钣金'   
        }
      }
      // 往li标签里添加显示消费log文本的p标签
      liElement.appendChild(createElement('p',{text:logText}))
      // 添加显示日期p标签
      liElement.appendChild(createElement('p',{
        text:dateFtt('yyyy.MM.dd hh:mm:ss', new Date(li.addtime*1000)),
        attr:{class:'gray'},
      }))
      // 创建div标签,右侧文本
      div = createElement('div',{attr:{class:'right'}})
      // div添加p标签
      div.appendChild(createElement('p',{text:`${query.cost?'-':'+'}${li.money}元`}))
      
      if (query.cost) { // 消费，显示消费网点
        paySite = li.sitename
      } else { // 充值，显示充值支付方式
        paySite = (li.payway === 1 ?'微信':'储值卡')
      }
      // div添加p标签
      div.appendChild(createElement('p',{text:paySite,attr:{class:'gray'}}))
      // li添加div标签
      liElement.appendChild(div)
      // 放进数组
      lis.push(liElement)
    }
    // 返回创建的li标签数组
    return lis
  }
  // 判断是否可以进行分页加载
  function loadEable(){
    if (!haveNextPage) return false
    // 加载中，返回false
    if (body.getAttribute('loading') === 'true') return false
    // 已经是最后一页，返回false
    if (body.getAttribute('loaded') === 'true') return false
    // 未滚动到底部，返回false
    if (body.offsetHeight + body.scrollTop <= body.scrollHeight - loadDistance) 
      return false
    // 否则，返回true
    return true
  }
  // 滚动分页加载
  body.addEventListener('scroll',function(){
  // 判断是否分页加载
    if (loadEable()) {
      // 开始加载数据
      getList(pageSize,pageIndex++,query.cost)
    } else {
      return false
    }
  })
  /**
   * 封装分页加载方法
   * @pageSize {number} 每页记录数
   * @pageIndex {number} 页码
   * @cost {Boolean} 是否加载消费记录
   */
  function getList(pageSize,pageIndex,cost){
    // 标记加载中
    body.setAttribute('loading','true')
    return getRecord({pageSize,pageIndex},cost)
      .then(data=>{
        // 显示数据
        appendLiToList(data.data)
        // 判断是否还有下一页,并标记
        if(data.pageCount === pageIndex){
          haveNextPage = false
        }
        // 取消标记加载中
        body.setAttribute('loading','false')
        if(pageIndex === 1 && data.data.length === 0){
          body.setAttribute('null','true')
        } else {
          body.setAttribute('null','false')
        }
      })
  }
  getList(pageSize,pageIndex++,query.cost)
  function appendLiToList(data){
  // 将加载的数据变成DOM元素
    let lis = getLis(data) 
    // 创建一个虚拟节点，减小重排成本     
    fragment = document.createDocumentFragment()
    for(let i=0;i<lis.length;i++){
    // 将标签添加到虚拟标签中
      fragment.appendChild(lis[i])
    } 
    // 统一添加到ul标签中
    log.appendChild(fragment)
  }
  
}

